<template>
  <div class="selecet-company">
    <div
      class="drop-show"
      title="点击收起"
      @click="simpleCom"
      :class="{ active: direction, normal: !direction }"
    >
      <!-- <img src="~/img/images/right_icon.png" alt="" /> -->
    </div>
    <!-- 搜索框 -->
    <div class="select-search">
      <input type="text" placeholder="搜索" v-model="searchContent" @keyup.enter="searchCompany" />
      <!-- <div class="list_title">企业列表</div> -->
      <div class="search-icon">
        <!-- <img src="~img/qiye_search_logo.png" alt="" @click="searchCompany" /> -->
      </div>
      <div class="search-icon">
        <img src="~img/search_icon.png" alt="" @click="searchCompany" />
      </div>
      <div class="input-logo">
        <img src="~img/qiye_search_logo.png" alt="" />
      </div>
    </div>
    <!-- 附件银行 -->
    <div class="select-body">
      <div v-if="bankList.length > 0">
        <div
          v-for="(item, index) in bankList"
          :key="index"
          class="body-item"
          @click="openArea(item, index)"
          :class="{ 'short-item': types === '1', active: selectIndex === index }"
        >
          <list-card :itemObj="item" :keyName="searchContent"></list-card>
        </div>
      </div>
      <!-- <Spin v-if="bankList.length === 0" size="large" class="loading"></Spin> -->
    </div>
  </div>
</template>

<script>
import { moreConditions } from './filtrate.js';
// import { getIndustryTree } from 'apis/Situation';
import ListCard from './listCard.vue';
export default {
  name: 'SelecetCompany',
  components: { ListCard },
  props: {
    bankList: {
      type: Array,
      default: function () {
        return [];
      }
    },
    // 类型判断当前是企业还是银行用户
    types: {
      type: String,
      default: ''
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      selectObj: null,
      showContent: true,
      searchContent: '',
      selectIndex: null,
      tabIndex: null,
      showDrop: false,
      score: [], // 评分
      distance: [], // 距离
      moreConditions: [], // 更多筛选
      scoreName: '评分',
      distanceName: '距离',
      industryName: '行业',
      rightId: '',
      parentId: '',
      yhOrQy: 2,
      enterpriseName: '',
      direction: true,
      extraObj: {},
      extraObj1: {},
      extraObj2: {},
      activeIndex1: 0,
      activeIndex2: 0,
      activeIndex3: '',
      activeIndex4: '',
      showSearchMore: false,
      newMoreConditions: {}
    };
  },

  computed: {},

  mounted() {},

  methods: {
    simpleCom() {
      this.direction = !this.direction;
      this.$emit('simpleCom');
    },
    formatName(name) {
      let newStr;
      if (name.length === 2) {
        newStr = name.substr(0, 1) + '*';
      } else if (name.length > 2) {
        let char = '';
        for (let i = 0, len = name.length - 2; i < len; i++) {
          char += '*';
        }
        newStr = name.substr(0, 2) + char + name.substr(-2, 2);
      } else {
        newStr = name;
      }
      return newStr;
    },
    openArea(item, index) {
      this.selectIndex = index;
      // 定位放大
      this.$emit('openArea', item);
    },
    searchCompany() {
      this.$emit('searchCompany', this.searchContent);
    },
    // 汇总筛选条件
    goSearch() {
      this.$parent.clearMarker();
      this.showDrop = false;
      this.tabIndex = null;
      const allConditions = {};
      // 1、评分
      this.score.forEach(val => {
        val.children.forEach(pre => {
          allConditions[pre.key] = pre.value;
        });
      });
      // 2、行业
      // allConditions.industy = this.rightId ? this.rightId : '';
      this.industryInfos.forEach(val => {
        val.children.forEach(pre => {
          allConditions[pre.key] = pre.value;
        });
      });
      // 3、距离
      this.distance.forEach(val => {
        val.children.forEach(pre => {
          allConditions[pre.key] = pre.value;
        });
      });
      // 4、更多
      this.moreConditions.forEach(val => {
        val.children.forEach(pre => {
          allConditions[pre.key] = pre.value;
        });
      });
      if (allConditions.numberOfCompanyUpperLimit) {
        allConditions.numberOfCompanyLowerLimit =
          allConditions.numberOfCompanyUpperLimit.split('_')[0];
        allConditions.numberOfCompanyUpperLimit =
          allConditions.numberOfCompanyUpperLimit.split('_')[1];
      }
      if (allConditions.registeredCapitalUpperLimit) {
        allConditions.registeredCapitalLowerLimit =
          allConditions.registeredCapitalUpperLimit.split('_')[0];
        allConditions.registeredCapitalUpperLimit =
          allConditions.registeredCapitalUpperLimit.split('_')[1];
      }
      if (allConditions.yearsOfEstablishUpperLimit) {
        allConditions.yearsOfEstablishLowerLimit =
          allConditions.yearsOfEstablishUpperLimit.split('_')[0];
        allConditions.yearsOfEstablishUpperLimit =
          allConditions.yearsOfEstablishUpperLimit.split('_')[1];
      }
      if (allConditions.scoreUpperLimit) {
        allConditions.scoreLowerLimit = allConditions.scoreUpperLimit.split('_')[0];
        allConditions.scoreUpperLimit = allConditions.scoreUpperLimit.split('_')[1];
      }
      // 5、企业的名称
      allConditions.enterpriseName = this.searchContent;
      // 6、其他的筛选
      console.log(allConditions, '所有的查询条件');
      this.$emit('goSearch', {
        ...allConditions,
        ...this.extraObj,
        ...this.extraObj1,
        ...this.extraObj2,
        ...this.newMoreConditions
      });
    },
    // 重置
    clear() {
      this.moreConditions = moreConditions();
    },
    // 获取行业的数据
    async getIndustryInfos() {
      // const params = {
      //   distance: '1.0',
      //   userLng: 120.63212,
      //   userLat: 31.26249,
      //   pageBO: {
      //     pageSize: 200,
      //     pageNum: 1
      //   }
      // };
      // const { data } = await getIndustryTree(params);
      // // this.industryInfos = res.data;
      // console.log(data, 1234);
      // // 处理返回的数据结构
      // data.forEach(val => {
      //   this.industryInfos[0].children[0].children.push({
      //     key: val.id + val.id,
      //     label: val.text
      //   });
      // });
    },
    selectRight(item) {
      this.rightId = item.id;
      this.parentId = item.parentId;
      this.goSearch();
    },
    searchBack(item) {
      this.showSearchMore = false;
      this.newMoreConditions = item;
      this.goSearch();
    }
  }
};
</script>

<style lang="scss" scoped>
/*滚动条*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #f5f5f5;
}

/*定义滚动条的轨道，内阴影及圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  background-color: #f5f5f5;
}

/*定义滑块，内阴影及圆角*/
::-webkit-scrollbar-thumb {
  /*width: 10px;*/
  height: 20px;
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(32, 61, 129);

  &:hover {
    background-color: rgb(140, 140, 140);
  }
}

.selecet-company {
  .drop-show {
    position: absolute;
    left: 460px;
    top: 532px;
    font-size: 50px;
    color: #0db0e2;

    img {
      width: 39px;
      height: 64px;
      cursor: pointer;
    }

    &.active {
      img {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transition: transform 0.7s;
      }
    }

    &.normal {
      img {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transition: transform 0.7s;
      }
    }
  }

  .content-item {
    line-height: 26px;

    P {
      &:first-of-type {
        margin-top: 42px;
        font-size: 40px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #dbf3ff;
      }

      &:last-of-type {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #0db7fe;
      }
    }
  }

  .select-search {
    height: 50px;
    width: 423px;
    overflow: hidden;
    // @include background_img('bgImg4');
    background: linear-gradient(270deg, rgba(89, 184, 246, 0) 0%, rgba(73, 166, 248, 0.6) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 30px;

    input {
      height: 50px;
      width: 423px;
      background: none;
      border: none;
      font-size: 18px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      // @include font_color('fontColor1');
      padding-left: 50px;
      outline: none;
    }

    ::-webkit-input-placeholder {
      // @include font_color('fontColor1');
    }

    .search-icon {
      position: absolute;
      right: 30px;
      top: 118px;
      z-index: 222;
      cursor: pointer;

      img {
        width: 18px;
        height: 18px;
      }
    }

    .input-logo {
      position: absolute;
      left: 0;
      top: 92px;
      z-index: 223;
      cursor: pointer;

      img {
        width: 66px;
        height: 66px;

        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }

  .select-tab {
    margin-top: 12px;
    margin-left: 3px;
    position: relative;
    width: 450px;
    height: 32px;
    // @include background_img('bgImg3');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    // justify-content: space-around;
    align-items: center;
    font-size: 14px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    // @include font_color('fontColor4');

    > div {
      width: 106px;
      height: 32px;
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #353536;
      text-align: center;
      margin-left: 5px;
      margin-top: 2px;
      line-height: 34px;
      // background-image: url('~img/images/tab_back.png');
      background-repeat: no-repeat;
      background-size: cover;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      &.active {
        // background-image: url('~img/images/tab_more.png');
        color: #ffffff;
      }
    }

    .tab-drop {
      color: #98c8e4;
      font-size: 12px;
      margin-left: 10px;
    }
  }

  .select-body {
    position: absolute;
    width: 455px;
    // height: 857px;
    top: 162px;
    bottom: 40px;
    z-index: 10;
    // @include background_img('bgImg5');
    // background-repeat: no-repeat;
    // background-size: cover;
    background-color: #fff;
    border: 1px solid rgba(135, 227, 255, 0.72);
    box-shadow: 0px 0px 8px 0px rgba(90, 202, 255, 0.84), 0px 1px 42px 0px rgba(0, 89, 208, 0.26);
    padding: 8px 2px 0 4px;
    overflow: auto;

    &.bank-body {
      top: 165px;
    }

    .body-item {
      margin: 10px;
      padding: 16px 0 16px 0px;
      cursor: pointer;
      //   border-bottom: 8px solid #f6f6f6;
      // border: 1px solid red;
      &.short-item {
        // height: 148px;
      }

      &:last-of-type {
        margin-bottom: 40px;
      }

      &:hover {
        background: rgba(206, 230, 242, 0.2);
        // border-radius: 7px;
      }

      &.active {
        background-color: rgba(25, 133, 243, 0.2);
        border-radius: 7px;
      }

      .body-name {
        font-size: 18px;
        font-family: Source Han Sans SC;
        font-weight: 500;
        // @include font_color('fontColor5');
      }

      .body-code {
        font-size: 12px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        // @include font_color('fontColor6');
      }

      .body-label {
        height: 28px;
        width: 100%;
        display: flex;
        margin-top: 12px;

        .body-label-left {
          display: flex;
          // width: 178px;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行

          // border: 1px solid red;
          p {
            // width: 178px;
            // display: flex;
            // align-items: center;
            // justify-content: center;
            height: 26px;
            border-radius: 4px;
            font-size: 14px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #1985f3;
            line-height: 26px;
            text-align: center;
            padding: 0 10px;

            // overflow: hidden; //超出的文本隐藏
            // text-overflow: ellipsis; //溢出用省略号显示
            // white-space: nowrap; //溢出不换行
            &:first-of-type {
              background: #dbedff;
            }

            &:last-of-type {
              // margin-left: 12px;
              background: #dbedff;
            }
          }
        }
      }

      .body-label-right {
        margin-top: 8px;
        display: flex;
        align-items: center;

        span {
          font-family: Source Han Sans SC;

          &:first-of-type {
            // margin-left: 10px;
            font-size: 14px;
            font-weight: 400;
            // @include font_color('fontColor7');
          }

          &:nth-of-type(2) {
            font-size: 16px;
            font-weight: 400;
            color: #da4f38;
          }

          &:last-of-type {
            margin-left: 5px;
            font-size: 16px;
            font-weight: 400;
            color: #da4f38;
            background-color: rgba(0, 88, 179, 0.12);
            padding: 2px 6px;
            border-radius: 4px;
          }
        }
      }

      .body-legal {
        display: flex;
        margin-top: 7px;

        .body-legal-left {
          width: 158px;

          span {
            font-size: 14px;
            font-family: Source Han Sans SC;
            font-weight: 400;

            &:first-of-type {
              // @include font_color('fontColor7');
            }

            &:last-of-type {
              // @include font_color('fontColor8');
            }
          }
        }

        .body-legal-right {
          display: flex;
          align-items: center;

          span {
            font-size: 14px;
            font-family: Source Han Sans SC;
            font-weight: 400;

            &:first-of-type {
              margin-left: 10px;
              // @include font_color('fontColor7');
            }

            &:last-of-type {
              // @include font_color('fontColor8');
            }
          }

          &.active {
            span {
              margin-left: 0px;
            }
          }
        }
      }

      .body-address {
        margin-top: 6px;
        display: flex;

        div {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #1985f3;
        }
      }

      &:first-of-type {
        margin-top: 0;
      }
    }

    .bottom-map-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background: #fff;

      &:first-of-type {
        border-radius: 8px;
      }

      &:last-of-type {
        border-bottom: 8px solid #f6f6f6;
        padding-bottom: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }

      .view-map-img1 {
        position: relative;
        margin-top: 10px;
        padding: 10px;
        width: 100px;
        text-align: center;
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #191919;
        cursor: pointer;

        &.active {
          background: #f8f8f8;
          border-radius: 6px;
        }

        img {
          width: 44px;
          height: 44px;
        }

        .bottom-map-list-new {
          position: absolute;
          right: 10px;
          top: 0;
          width: 30px;
          height: 18px;
          background: #ef6464;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-family: Helvetica;
          font-weight: 400;
          color: #fefefe;
        }
      }

      .view-map-img2 {
        position: relative;
        margin-top: 10px;
        width: 80px;
        text-align: center;
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #191919;
        cursor: pointer;

        &.active {
          background: #f8f8f8;
          border-radius: 6px;
        }

        img {
          width: 44px;
          height: 44px;
        }
      }
    }

    .view-map-top-body {
      background: #fff;

      ::v-deep .ivu-tabs-ink-bar {
        display: none;
      }

      ::v-deep .ivu-tabs-tab-active {
        background: #e4efff;
        border-radius: 13px;
      }

      ::v-deep .ivu-tabs-bar {
        border-bottom: 1px solid #fff;
      }

      .view-map-top {
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .view-map-top-tj {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 500;
          width: 44px;
          // border-radius: 5px;
          border-bottom: 3px solid #3282e4;
          /* color: #3282E4; */
        }

        .view-map-top-right {
          margin-left: auto;
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #191919;
        }
      }

      .view-map-top-tab {
        margin-top: 10px;
        background: #fff;
        height: 40px;

        .tj-one {
          display: flex;
          box-sizing: border-box;
          overflow-x: auto;
          width: 445px;

          .tj-one-item {
            height: 26px;
            width: auto;
            background: #e4efff;
            border-radius: 13px;
            overflow: hidden;
            display: block;
          }
        }
      }
    }
  }

  .body-more {
    position: absolute;
    width: 455px;
    // height: 857px;
    z-index: 999;
    top: 90px;
    bottom: 40px;
    // @include background_img('bgImg5');
    // background-repeat: no-repeat;
    // background-size: cover;
    background-color: #fff;
    border: 1px solid rgba(135, 227, 255, 0.72);
    box-shadow: 0px 0px 8px 0px rgba(90, 202, 255, 0.84), 0px 1px 42px 0px rgba(0, 89, 208, 0.26);
    // padding: 8px 2px 0 4px;
    overflow: hidden;
  }

  .drop-down {
    position: absolute;
    top: 200px;
    left: 4px;
    width: 455px;
    max-height: 802px;
    background: #ffffff;
    border: 2px solid rgba(135, 227, 255, 0.72);
    box-shadow: 0px 0px 8px 0px rgba(90, 202, 255, 0.84), 0px 1px 42px 0px rgba(0, 89, 208, 0.26);
    // border-radius: 15px;
    overflow: auto;
    z-index: 103;
  }

  .bottom-tab {
    position: absolute;
    z-index: 104;
    bottom: 40px;
    left: 5px;
    right: 0;
    width: 455px;
    height: 76px;
    background: rgba(255, 255, 255, 1);
    border-top: 2px solid rgba(135, 227, 255, 0.72);
    box-shadow: 0px 0px 8px 0px rgba(90, 202, 255, 0.84), 0px 1px 42px 0px rgba(0, 89, 208, 0.26);
    display: flex;
    justify-content: space-around;
    align-items: center;

    > div {
      width: 119px;
      height: 39px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #eaeeef;
      border-radius: 4px;
      cursor: pointer;

      &:last-of-type {
        background: #1985f3;
        color: #fff;
      }
    }
  }

  .loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
  }
}
.list_title {
  font-size: 29px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #d7f4fe;
  margin-left: 50px;
  margin-top: 5px;
}
</style>
